<template>
  <div class="passage-page">
    <nav-unit />
    <div class="center-content">
      <selfIntroduction />
      <div class="passages">
        <h1>文章一览</h1>
        <h5 v-if="state"><i>{{state}}</i>的搜索结果</h5>
        <el-tabs v-model="activeName" @tab-change="tabChange">
          <el-tab-pane label="所有" name="all"></el-tab-pane>
          <el-tab-pane label="学术" name="academic"></el-tab-pane>
          <el-tab-pane label="生活" name="usual"></el-tab-pane>
          <el-tab-pane label="锚点" name="anchor"></el-tab-pane>
        </el-tabs>
        <blog-preview v-for="blog in currentBlogs" :key="blog.id" :blog="blog" />
        <el-image v-if="!total" :src="require('@/assets/no-data.png')"></el-image>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="changePage" v-if="total" />
      </div>
      <music-player />
    </div>
    <footer-unit />
  </div>
</template>

<script>
import NavUnit from '@/components/Navigation/NavUnit.vue'
import SelfIntroduction from '@/components/Author/SelfIntroduction.vue'
import BlogPreview from '@/components/Blog/BlogPreview.vue'
import MusicPlayer from '@/components/Music/MusicPlayer.vue'
import FooterUnit from '@/components/Footer/FooterUnit.vue'
import axios from 'axios'
import { onBeforeMount, reactive, ref } from '@vue/runtime-core'
import router from '@/router'
import { onBeforeRouteUpdate } from 'vue-router'

export default {
  name: 'HomePage',
  components: { 
    NavUnit,
    SelfIntroduction,
    BlogPreview,
    MusicPlayer,
    FooterUnit,
  },
  setup() {
    let blogs = []//所有blog不展示，不做响应式,只请求一次
    let filterBlogs = []//筛选后的blog，用blogs反复过滤
    let currentBlogs = reactive([])//当前blog
    let total = ref(0)//文章总数
    const activeName = ref('all')
    const state = ref('')

    const loadBlogs= (page) => {
      total.value = Math.ceil(filterBlogs.length/4)*10//total属性需要乘10才是页码数，鬼才设计
      currentBlogs.length = 0//奇怪的清空数组方式，直接赋值reative丢失响应式
      for(let i = 0; i < 4; i++) {
        let j = i+(page-1)*4
        if(j < filterBlogs.length) {
          currentBlogs.push(filterBlogs[j])
        }
      }
    }
    const changePage = (page) => {
      //changepage是elemntplus的函数，其它地方调会bug，再封了一层
      loadBlogs(page)
    }
    const tabChange = (name) => {
      //console.log(name)
      switch(name) {
        case 'all': filterBlogs = blogs; break
        case 'academic': filterBlogs = blogs.filter(blog => blog.type == '学术'); break
        case 'usual': filterBlogs = blogs.filter(blog => blog.type == '生活'); break
        case 'anchor': filterBlogs = blogs.filter(blog => blog.type == '锚点');
      }
      loadBlogs(1)
    }

    onBeforeMount(() => {
      axios.get('http://localhost/api/getBlog').then(res => {
        blogs = res.data
        blogs = blogs.reverse()
        state.value = router.currentRoute.value.query.state ? router.currentRoute.value.query.state : ''
        filterBlogs = blogs.filter(blog => {
          return blog.title.toLowerCase().includes(state.value) || blog.description.toLowerCase().includes(state.value)
        })
       
        //console.log(blogs)
        loadBlogs(1)
      }).catch(err => {
        console.log('未知错误！')
        console.log(err)
      })
    })
    //路由路径不变参数改变时触发
    onBeforeRouteUpdate((to) => {
      state.value = to.query.state ? to.query.state : ''
      filterBlogs = blogs.filter(blog => {
        return blog.title.toLowerCase().includes(state.value) || blog.description.toLowerCase().includes(state.value)
      })
      loadBlogs(1)
    })


    return {
      currentBlogs,
      total,
      activeName,
      state,
      changePage,
      tabChange
    }
  }
}
</script>

<style scoped>
  .center-content {
    display: flex;
    justify-content: space-between;
  }
  .passages {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 玩来玩去还是这个宽度灵活 */
    width: 50vw;
    margin: 0 50px;
  }
  .el-tabs {
    width: 100%;
  }
  h1 {
    margin: 10px 0;
  }
  i {
    /* 不倾斜 */
    font-style: normal;
    color: #48DBFB;
  }
</style>